import  { useState } from 'react'
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import SaveIcon from '@mui/icons-material/Save'
import CancelIcon from '@mui/icons-material/Cancel'
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import { useNavigate, useParams } from 'react-router-dom';
import {userService} from '../../services';
import { useMessage } from '../../hooks';

export default function EditUser() {
    const { userId, userName, email, role: roleName } = useParams();
    const [user, setUser] = useState({ userName, email, roleName })
    const [loading, setLoading] = useState(false);
    const [role, setRole] = useState(roleName);   
    const navigate = useNavigate();   
    const onChangeRole = (event) => setRole(event.target.value);
    const { showError, showSuccess } = useMessage();
    const onSaveUser = async () => {
        setLoading(true);

        const formValues = {
            UserName: user.userName,
            Email: user.email,
            Role: role,
            Id: +userId
        }

        if (formValues.UserName && formValues.Email) {
            try {
                await userService.updateUser(formValues)
                showSuccess('saved data successfully');
                navigate("/users");              
            } catch (err) {
                showError(err);                   
            } finally {
                setLoading(false); 
            }           
        } else {
            showError('errors: required field have did not enter value!');
            setLoading(false);
        }
    }
    return (
        <>
            <Box component="form" sx={{
                '& .MuiTextField-root': { mt: 3, width: '100%' },
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }} noValidate autoComplete="off">
                <Stack sx={{ width: '40%' }}>
                    <h2>Edit User </h2>

                    <TextField required value={user.userName} onChange={(e) => setUser({ ...user, userName: e.target.value })}
                        id="outlined-required"
                        label="User name"
                    />
                    <TextField
                        required fullWidth value={user.email}
                        onChange={(e) => setUser({ ...user, email: e.target.value })}
                        id="outlined-disabled"
                        label="Email"
                    />

                    <FormControl fullWidth sx={{ mt: 3 }}>
                        <InputLabel id="demo-simple-select-label">Role</InputLabel>
                        <Select
                            labelId="demo-simple-select-label"
                            id="demo-simple-select"
                            value={role}
                            label="Role"
                            onChange={onChangeRole}>
                            <MenuItem value={"User"}>User</MenuItem>
                            <MenuItem value={"Admin"}>Admin</MenuItem>
                        </Select>
                    </FormControl>
                    <Stack sx={{ mt: 3 }} direction='row' spacing={2}>
                        <Button

                            color="primary"
                            onClick={onSaveUser}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<SaveIcon />}
                            variant="contained">
                            Save
                        </Button>
                        <Button
                            color="primary"
                            onClick={() => navigate(-1)}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<CancelIcon />}
                            variant="outlined">
                            Cancel
                        </Button>
                    </Stack>
                </Stack>
            </Box>           
        </>
    )
}


